/**
 *  学习目标：Todos 案例
 */
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodoActionCreator, checkedAll, clearTodoAction, delTodoActionCreator, updateTodoActionCreator, updateTodoType } from './store/action/todo';
import './styles/base.css';
import './styles/index.css';



export default class App extends React.Component {
    render() {
        return (
            <section className="todoapp">
                {/* 头部 */}
                <Header></Header>
                {/* 主体 */}
                <Main></Main>
                {/* 底部 */}
                <Footer></Footer>
            </section>
        );
    }
}


function Main() {
    // 4. 取出数据
    const { list, type } = useSelector((state) => state.todu);
    const showList = list.filter((item) => {
        if (type === 'active') return item.isDone !== true
        if (type === 'completed') return item.isDone === true
        return true
    })
    let isAll = list.length && list.every((item) => item.isDone === true)
    const dispatch = useDispatch()
    return (
        <section className="main">
            <input id="toggle-all" onChange={() => dispatch(checkedAll(isAll))} className="toggle-all" checked={isAll} type="checkbox" />
            <label htmlFor="toggle-all">全选</label>
            <ul className="todo-list">
                {
                    showList.map(item => {
                        return (
                            <li key={item.id} className={item.isDone ? "completed" : ''}>
                                <div className="view">
                                    <input checked={item.isDone} className="toggle" onChange={() => dispatch(updateTodoActionCreator(item.id))} type="checkbox" />
                                    <label>{item.task}</label>
                                    <button className="destroy" onClick={() => dispatch(delTodoActionCreator(item.id))}></button>
                                </div>
                            </li>
                        )
                    })
                }
            </ul>
        </section>
    );
}
function Header() {
    const [task, setTask] = useState('')
    const dispatch = useDispatch()
    const handleKeyDown = (e) => {
        if (e.keyCode === 13) {
            dispatch(addTodoActionCreator(task))
        }
        if (e.keyCode === 27) {
            setTask('')
        }
    }
    return (
        <header className="header">
            <h1>todos</h1>
            <input value={task} onKeyDown={handleKeyDown} onChange={(e) => setTask(e.target.value)} className="new-todo" placeholder="需要做什么" autoFocus />
        </header>
    );
}


function Footer() {
    const dispatch = useDispatch()
    const { list, type } = useSelector(state => state.todu)
    let count = list.filter(item => item.isDone !== true).length

    return (
        <footer className="footer">
            <span className="todo-count">
                <strong>{count}</strong> 剩余
            </span>
            <ul className="filters">
                <li>
                    <a onClick={() => dispatch(updateTodoType('all'))} className={type === 'all' ? "all selected" : ''} href="#/">
                        全部
                    </a>
                </li>
                <li>
                    <a onClick={() => dispatch(updateTodoType('active'))} className={type === 'active' ? "active selected" : ''} href="#/active">
                        未完成
                    </a>
                </li>
                <li>
                    <a onClick={() => dispatch(updateTodoType('completed'))} className={type === 'completed' ? "completed selected" : ''} href="#/completed">
                        已完成
                    </a>
                </li>
            </ul>
            <button onClick={() => dispatch(clearTodoAction())} className="clear-completed">清除已完成</button>
        </footer>
    );
}
